@import "../../../assets/styles/helper.less";

.todo-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: @border;
  transition: all .2s;

  &:hover {
    background: @color-hover;
  }

  &:first-child {
    border-top: @border;
  }

  &.editing {
    background: @color-highlight;
  }

  &.completed {
    .text {
      text-decoration: line-through;
      color: @color-text-light;
    }
  }

  .edit-filed, .text {
    padding-left: 8px;
    flex: 1;
  }

  .edit-filed {
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      background: inherit;
      width: 100%;
      border: none;
      outline: none;
    }

    .icon-wrapper {
      flex-shrink: 0;

      i {
        margin-left: 4px;
        color: @color-text-light;
      }
    }
  }

  .text {
    display: flex;
  }
}